<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>

<script>
  import { Loading, TransferDom } from 'vux'
  import { mapGetters, mapActions } from 'vuex'

  export default {
    name: 'app',
    data() {
      return {}
    },
    directives: {
      TransferDom
    },
    components: {
      Loading
    },
    methods: {
      ...mapActions(['setTransition'])
    },
    computed: {
      ...mapGetters([
        'transitionName',
        'isLoading'
      ])
    },
    watch: {
      /*全局路由左右切换滑动效果,切换动画效果使用了:vue2-animate
      使用:
        1.从vuex中获取到transitionName
        2.在需要滑动的<router-view>绑定v-bind:transitionName即可*/
      $route(to, from){
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        const toIndex = to.meta.index
        const fromIndex = from.meta.index

        const routerParams = {
          toDepth,
          fromDepth,
          toIndex,
          fromIndex
        }
        this.setTransition(routerParams)
      }
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';

  body {
    background-color: #fff;
  }

  #app{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  /* 上面是为了保证滑动的时候不出现抖动情况 */
  .child-view {
    // position: absolute;
    // left:0;
    // top: 0;
    height: 100%;
    width: 100%;
    // transition: all .5s cubic-bezier(.55,0,.1,1);
    background-color: #fff;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }
</style>
